<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useOrderStore } from '@/stores/order';
import ShortCut from '@/components/ShortCut.vue';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const orderStore = useOrderStore();
const loading = ref(true);
const error = ref(null);

// 获取订单ID
const orderId = computed(() => route.params.id);

// 获取当前订单
const order = computed(() => {
  if (!orderStore.orderList.length) return null;
  return orderStore.orderList.find(o => o.order_id == orderId.value) || null;
});

// 状态转换
const orderStatus = (status) => {
  switch(status) {
    case '0': return '待发货';
    case '1': return '已完成';
    default: return '未知状态';
  }
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知日期';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 计算商品总价
const calculateTotal = (book) => {
  return (book.price * book.num).toFixed(2);
};

// 处理删除订单
const handleDeleteOrder = async () => {
  const success = await orderStore.deleteOrder(orderId.value);
  if (success) {
    router.push('/order');
  }
};

// 返回订单列表
const goBack = () => {
  router.push('/order');
};

// 打印订单
const printOrder = () => {
  window.print();
};

onMounted(async () => {
  loading.value = true;
  try {
    await orderStore.getOrderList();
    if (!order.value) {
      error.value = '订单不存在或已被删除';
      ElMessage.error(error.value);
    }
  } catch (err) {
    error.value = err.message || '获取订单详情失败';
    ElMessage.error(error.value);
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <div class="order-detail-page">
    <ShortCut class="no-print"></ShortCut>
    
    <div class="order-detail-container">
      <div class="page-header no-print">
        <el-button @click="goBack" icon="el-icon-back">返回订单列表</el-button>
        <div class="actions">
          <!-- <el-button type="primary" @click="printOrder" icon="el-icon-printer">打印订单</el-button> -->
          <el-button type="danger" @click="handleDeleteOrder" :loading="loading">删除订单</el-button>
        </div>
      </div>
      
      <el-card v-if="loading" class="loading-card">
        <div class="loading-container">
          <el-skeleton style="width: 100%" animated>
            <template #template>
              <el-skeleton-item variant="text" style="width: 100%; height: 40px; margin-bottom: 20px" />
              <el-skeleton-item variant="text" style="width: 60%; height: 20px" />
              <el-skeleton-item variant="text" style="width: 50%; height: 20px; margin: 10px 0" />
              <el-skeleton-item variant="text" style="width: 70%; height: 20px; margin-bottom: 20px" />
              <el-skeleton-item variant="p" style="width: 100%; height: 300px" />
            </template>
          </el-skeleton>
        </div>
      </el-card>
      
      <el-empty v-else-if="error || !order" :description="error || '订单不存在或已被删除'"></el-empty>
      
      <div v-else class="order-detail">
        <div class="order-header">
          <h1>订单详情 <span class="order-id">#{{ order.order_id }}</span></h1>
          <div class="order-meta">
            <div class="status-badge" :class="{ 'status-pending': order.status === '0', 'status-completed': order.status === '1' }">
              {{ orderStatus(order.status) }}
            </div>
            <div class="order-date">下单时间: {{ formatDate(order.orderDate) }}</div>
          </div>
        </div>
        
        <div class="info-section">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-card">
                <h3>收货信息</h3>
                <div class="info-item">
                  <strong>收货人:</strong> {{ order.recipient }}
                </div>
                <div class="info-item">
                  <strong>联系电话:</strong> {{ order.phone }}
                </div>
                <div class="info-item">
                  <strong>收货地址:</strong> {{ order.address }}
                </div>
              </div>
            </el-col>
            
            <el-col :span="12">
              <div class="info-card">
                <h3>订单信息</h3>
                <div class="info-item">
                  <strong>订单编号:</strong> {{ order.order_id }}
                </div>
                <div class="info-item">
                  <strong>下单时间:</strong> {{ formatDate(order.orderDate) }}
                </div>
                <div class="info-item">
                  <strong>订单状态:</strong> {{ orderStatus(order.status) }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        
        <div class="products-section">
          <h3>订单商品</h3>
          <el-table :data="order.books" stripe style="width: 100%">
            <el-table-column label="商品图片" width="120">
              <template #default="scope">
                <img :src="scope.row.img" :alt="scope.row.booksname" class="product-image">
              </template>
            </el-table-column>
            <el-table-column prop="booksname" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="单价" width="120">
              <template #default="scope">
                ¥{{ scope.row.price }}
              </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" width="100"></el-table-column>
            <el-table-column label="小计" width="150">
              <template #default="scope">
                ¥{{ calculateTotal(scope.row) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="order-summary">
          <div class="summary-item">
            <span>商品总金额:</span>
            <span class="amount">¥{{ order.totalprice }}</span>
          </div>
          <div class="summary-item">
            <span>运费:</span>
            <span class="amount">¥0.00</span>
          </div>
          <div class="summary-item total">
            <span>订单总计:</span>
            <span class="amount">¥{{ order.totalprice }}</span>
          </div>
        </div>
        
        <div class="order-notes">
          <p>感谢您在我们的书城购物！如有任何问题，请联系客服。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-detail-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.order-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.actions {
  display: flex;
  gap: 10px;
}

.loading-card {
  padding: 20px;
  margin-bottom: 20px;
}

.loading-container {
  width: 100%;
}

.order-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.order-header h1 {
  font-size: 24px;
  margin: 0 0 10px 0;
  color: #303133;
}

.order-id {
  color: #909399;
  font-weight: normal;
}

.order-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-badge {
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.status-pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.status-completed {
  background-color: #f0f9eb;
  color: #67c23a;
}

.order-date {
  color: #909399;
  font-size: 14px;
}

.info-section {
  margin-bottom: 30px;
}

.info-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  height: 100%;
}

.info-card h3 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.info-item {
  margin-bottom: 10px;
  color: #606266;
}

.info-item strong {
  color: #303133;
  margin-right: 5px;
}

.products-section {
  margin-bottom: 30px;
}

.products-section h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #303133;
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.order-summary {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #606266;
}

.summary-item.total {
  font-weight: bold;
  border-top: 1px solid #ebeef5;
  padding-top: 10px;
  margin-top: 10px;
  color: #303133;
}

.amount {
  min-width: 100px;
  text-align: right;
}

.total .amount {
  color: #f56c6c;
  font-size: 18px;
}

.order-notes {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  color: #909399;
  font-style: italic;
}

@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background-color: #fff;
  }
  
  .order-detail-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .order-detail {
    padding: 20px;
  }
  
  .el-table th, .el-table td {
    border-color: #000 !important;
  }
}

@media (max-width: 768px) {
  .order-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .status-badge {
    margin-bottom: 10px;
  }
  
  .info-section .el-col {
    margin-bottom: 20px;
  }
}
</style> 